<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>图片上传</title>

	<script src="https://www.jq22.com/jquery/jquery-1.10.2.js"></script>
	<link rel="stylesheet" href="https://www.jq22.com/jquery/bootstrap-3.3.4.css">
	<script src="https://www.jq22.com/jquery/bootstrap-3.3.4.js"></script>

	<link rel="stylesheet" href="./public/index.css">
</head>
<body>
	<div class="box">
		<p>上传log</p>
		<p>
			<div class="upload imgLog">
				<span><i class="glyphicon glyphicon-open"></i>上传log</span>
			</div>
		</p>
		<p>上传头像</p>
        <p>
	        <div class="upload imgLog2">
				<span><i class="glyphicon glyphicon-open"></i>上传头像</span>
			</div>
		</p>	
		<p>上传海报</p>
        <p>
	        <div class="upload imgLog3">
				<span><i class="glyphicon glyphicon-open"></i>上传海报</span>
			</div>
		</p>		 	
	</div>
    <script src="./public/index.js"></script>
	<script>
		$(function(){
			var img1 = new ImgUpload('.imgLog',210,55,55);
			var img2 = new ImgUpload('.imgLog2',100,100,100);
			var img3 = new ImgUpload('.imgLog3',400,200,200);
            
		    $(document).on('change',".imgLog input",function(e){
		    	//模拟后台返回url
		    	var url = window.URL.createObjectURL(e.target.files[0]);
		    	$(this).parent().css('background','url('+url+')0% 0% / cover')
			    console.log(window.URL.createObjectURL(e.target.files[0]))
                
			    img1.setSpan(this)
			})

            $(document).on('change',".imgLog2 input",function(e){
		    	//模拟后台返回url
		    	var url = window.URL.createObjectURL(e.target.files[0]);
		    	$(this).parent().css('background','url('+url+')0% 0% / cover')
			    img2.setSpan(this)
			})	

            $(document).on('change',".imgLog3 input",function(e){
		    	//模拟后台返回url
		    	var url = window.URL.createObjectURL(e.target.files[0]);
		    	$(this).parent().css('background','url('+url+')0% 0% / cover')
                
			    img3.setSpan(this)
			})						

		})

	</script>
</body>
</html>